/**index.less**/
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f9f9f9;
}
.container {
  width: 100%;
  min-height: 100vh;
}
.content {
  display: flex;
  flex-direction: column;
  padding: 32rpx;
  padding-bottom: 32rpx;
  background-color: #f9f9f9;
}
.page-title {
  font-size: 44rpx;
  font-weight: bold;
  margin-bottom: 32rpx;
  color: #333;
}
.skeleton-wrapper {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 32rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}
.skeleton {
  animation: skeleton-loading 1.5s infinite ease-in-out;
}
.skeleton-title {
  height: 48rpx;
  width: 40%;
  background: #f0f0f0;
  border-radius: 8rpx;
  margin-bottom: 16rpx;
}
.skeleton-author {
  height: 36rpx;
  width: 30%;
  background: #f0f0f0;
  border-radius: 8rpx;
  margin-bottom: 48rpx;
}
.skeleton-content {
  margin-bottom: 32rpx;
}
.skeleton-line {
  height: 32rpx;
  background: #f0f0f0;
  border-radius: 8rpx;
  margin-bottom: 24rpx;
}
.skeleton-line:nth-child(1) {
  width: 100%;
}
.skeleton-line:nth-child(2) {
  width: 92%;
}
.skeleton-line:nth-child(3) {
  width: 96%;
}
.skeleton-line:nth-child(4) {
  width: 80%;
}
.skeleton-img {
  height: 320rpx;
  background: #f0f0f0;
  border-radius: 8rpx;
  margin-top: 32rpx;
}
@keyframes skeleton-loading {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}
.error-wrapper {
  background: #fff;
  border-radius: 16rpx;
  padding: 60rpx 30rpx;
  margin-bottom: 32rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.error-icon {
  width: 100rpx;
  height: 100rpx;
  background: #ff4d4f;
  color: #fff;
  font-size: 60rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24rpx;
}
.error-text {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 32rpx;
}
.error-btn {
  padding: 16rpx 48rpx;
  background: #1890ff;
  color: #fff;
  border-radius: 8rpx;
  font-size: 28rpx;
}
.card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 32rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}
.card-header {
  margin-bottom: 32rpx;
  text-align: center;
}
.poem-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 12rpx;
}
.poem-author {
  font-size: 28rpx;
  color: #666;
}
.poem-content {
  margin-bottom: 32rpx;
  line-height: 1.8;
  text-align: center;
}
.poem-line {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 16rpx;
}
.card-divider {
  height: 1rpx;
  background: #f0f0f0;
  margin: 24rpx 0;
}
.poem-notes {
  margin-bottom: 32rpx;
}
.notes-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
}
.note-item {
  margin-bottom: 16rpx;
  line-height: 1.6;
}
.note-key {
  color: #1890ff;
  font-weight: bold;
  margin-right: 8rpx;
}
.note-value {
  color: #666;
}
.appreciation-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
}
.appreciation-content {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}
.poem-image {
  margin-top: 32rpx;
  border-radius: 12rpx;
  overflow: hidden;
}
.poem-image image {
  width: 100%;
  height: 360rpx;
}
.card-actions {
  display: flex;
  margin-top: 32rpx;
  border-top: 1rpx solid #f0f0f0;
  padding-top: 24rpx;
}
.card-action {
  display: flex;
  align-items: center;
  margin-right: 48rpx;
}
.card-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 12rpx;
}
.collect-icon {
  background-image: url("data:image/svg+xml,%3Csvg t='1628069252562' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2797' width='32' height='32'%3E%3Cpath d='M484.266667 272.021333l6.634666 6.72L512 300.757333l14.208-14.336 7.509333-7.68c42.709333-43.008 77.013333-63.829333 107.221334-63.829333 31.488 0 56.832 14.997333 75.648 44.501333 17.728 27.733333 26.88 65.323333 26.88 107.797334 0 40.106667-9.194667 76.373333-28.288 112.64-18.005333 34.133333-43.669333 65.365333-76.672 94.336a688.384 688.384 0 0 1-115.242667 90.582666 688.341333 688.341333 0 0 1-115.242667-90.582666c-33.002667-28.970667-58.666667-60.202667-76.672-94.336-19.093333-36.266667-28.288-72.533333-28.288-112.64 0-43.477333 9.557333-81.664 27.989333-109.653334 19.541333-29.781333 45.866667-44.906667 78.250667-44.906666 29.44 0 63.744 20.48 106.453333 62.677333l6.741334 6.613333z' fill='%23ff4d4f' p-id='2798'%3E%3C/path%3E%3C/svg%3E");
  background-size: cover;
}
.change-icon {
  background-image: url("data:image/svg+xml,%3Csvg t='1628069336998' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='7464' width='32' height='32'%3E%3Cpath d='M789.333333 768c17.066667 0 32 14.933333 32 32s-14.933333 32-32 32H234.666667c-17.066667 0-32-14.933333-32-32s14.933333-32 32-32h554.666666z m0-298.666667c17.066667 0 32 14.933333 32 32s-14.933333 32-32 32H234.666667c-17.066667 0-32-14.933333-32-32s14.933333-32 32-32h554.666666z m0-298.666666c17.066667 0 32 14.933333 32 32s-14.933333 32-32 32H234.666667c-17.066667 0-32-14.933333-32-32s14.933333-32 32-32h554.666666z' fill='%231890ff' p-id='7465'%3E%3C/path%3E%3C/svg%3E");
  background-size: cover;
}
.card-action-text {
  font-size: 28rpx;
  color: #666;
}
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1001;
}
.popup-content {
  position: relative;
  background: #fff;
  border-radius: 16rpx;
  width: 80%;
  max-width: 600rpx;
  z-index: 1002;
  overflow: hidden;
}
.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}
.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}
.popup-close {
  font-size: 36rpx;
  color: #999;
  padding: 0 10rpx;
}
.popup-body {
  padding: 30rpx;
}
.form-item {
  margin-bottom: 24rpx;
}
.form-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 12rpx;
}
.form-input {
  width: 100%;
  height: 80rpx;
  background: #f5f5f5;
  border-radius: 8rpx;
  padding: 0 24rpx;
  box-sizing: border-box;
  font-size: 28rpx;
}
.form-picker {
  width: 100%;
  height: 80rpx;
  background: #f5f5f5;
  border-radius: 8rpx;
  padding: 0 24rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.picker-text {
  font-size: 28rpx;
  color: #333;
}
.popup-footer {
  display: flex;
  border-top: 1rpx solid #f0f0f0;
}
.popup-btn {
  flex: 1;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  font-size: 30rpx;
  background: transparent;
  border-radius: 0;
}
.popup-btn::after {
  border: none;
}
.popup-btn.cancel {
  color: #666;
}
.popup-btn.confirm {
  color: #1890ff;
  font-weight: bold;
}
/* 移除底部导航栏样式 */
